<template>
    <view class="container">
        <!-- 小程序头部兼容 -->
        <!-- #ifdef MP -->
        <view class="mp-search-box">
            <input class="ser-input" type="text" @confirm="searchGoods()" v-model="keyword" placeholder="输入关键字搜索"/>
        </view>
        <!-- #endif -->

        <!-- 头部轮播 -->
        <view class="carousel-section">
            <!-- 标题栏和状态栏占位符 -->
            <view class="titleNview-placing"></view>
            <!-- 背景色区域 -->
            <view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
            <swiper class="carousel" circular @change="swiperChange">
                <swiper-item v-for="(item, index) in bannerList" :key="index" class="carousel-item"
                             @click="navToProduct()">
                    <image :src="item.ad_code"/>
                </swiper-item>
            </swiper>
            <!-- 自定义swiper指示器 -->
            <view class="swiper-dots">
                <text class="num">{{swiperCurrent + 1}}</text>
                <text class="sign">/</text>
                <text class="num">{{bannerList.length}}</text>
            </view>
        </view>
        <!-- 分类 -->
        <view class="cate-section">
            <view class="cate-item" v-for="(item,index) in catagoryList" :key="index"
                  @click="navToProductList({action:'catagory',params:item.id})">
                <image :src="item.image"></image>
                <text>{{item.name}}</text>
            </view>
        </view>

        <!-- 最新新品 -->
        <view class="f-header m-t" @click="navToProductList({action:'new',params:''})">
            <image src="/static/temp/h1.png"></image>
            <view class="tit-box">
                <text class="tit">最近新品</text>
                <text class="tit2">The new goods</text>
            </view>
            <text class="yticon icon-you"></text>
        </view>
        <view class="seckill-section m-t">
            <scroll-view class="floor-list" scroll-x>
                <view class="scoll-wrapper">
                    <view
                            v-for="(item, index) in newgoodsList" :key="index"
                            class="floor-item"
                            @click="navToDetailPage(item)"
                    >
                        <image :src="item.original_img" mode="aspectFill"></image>
                        <text class="title clamp">{{item.goods_name}}</text>
                        <text class="price">{{item.price}}</text>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- 猜你喜欢 -->
        <view class="f-header m-t" @click="navToProductList({action:'guess',params:''})">
            <image src="/static/temp/h1.png"></image>
            <view class="tit-box">
                <text class="tit">猜你喜欢</text>
                <text class="tit2">Guess You Like It</text>
            </view>
            <text class="yticon icon-you"></text>
        </view>

        <view class="guess-section">
            <view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
                <view class="image-wrapper">
                    <image :src="item.original_img" mode="aspectFill"></image>
                </view>
                <text class="title clamp">{{item.goods_name}}</text>
                <text class="price">{{item.price}}</text>
            </view>
        </view>


    </view>
</template>

<script>
  import server from '../../utils/server'

  import { getbanner, getCatagory } from '@/api/home'

  import { getGoodsListNew, getGoodsListRecommand } from '@/api/goods'

  export default {

    data () {
      return {
        titleNViewBackground: '',
        swiperCurrent: 0,
        swiperLength: 0,
        goodsList: [],
        newgoodsList: [],
        bannerList: [],
        catagoryList: [],
        keyword: '',
      }
    },
    onShareAppMessage(res) {
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '趣奇市场-便捷的的市场',
        content:'一个便捷的的市场',
        path: '/pages/index/index'
      }
    },
    onLoad () {
      this.loadData()
    },
    onShow () {
      this.keyword = ''
    },
    onPullDownRefresh () {
      this.loadData()
    },

    methods: {
      /**
       * 请求静态数据只是为了代码不那么乱
       * 分次请求未作整合
       */
      async loadData () {
        uni.showLoading({
          title: '正在加载',
        })
        this.bannerList = (await getbanner({pid: 1})).result
        if (!this.bannerList instanceof Array || this.server._isEmpty(this.bannerList)) {
          this.bannerList = []
        }
        if (!this.server._isEmpty(this.bannerList) && this.bannerList.length > 0) {
          this.bannerList.forEach(item => {
            item.ad_code = this.server.fixUrl(item.ad_code)
          })
        }
        this.catagoryList = (await getCatagory()).result
        if (!this.catagoryList instanceof Array || this.server._isEmpty(this.catagoryList)) {
          this.catagoryList = []
        }
        if (!this.server._isEmpty(this.catagoryList) && this.catagoryList.length > 0) {
          this.catagoryList.forEach(item => {
            item.image = this.server.fixUrl(item.image)
          })
        }
        console.log(this.catagoryList)
        this.newgoodsList = (await getGoodsListNew()).result
        if (!this.newgoodsList instanceof Array || this.server._isEmpty(this.newgoodsList)) {
          this.newgoodsList = []
        }
        if (!this.server._isEmpty(this.newgoodsList) && this.newgoodsList.length > 0) {
          this.newgoodsList.forEach(item => {
            item.original_img = this.server.fixUrl(item.original_img)
          })
        }
        this.goodsList = (await getGoodsListRecommand()).result
        if (!this.goodsList instanceof Array || this.server._isEmpty(this.goodsList)) {
          this.goodsList = []
        }
        if (!this.server._isEmpty(this.goodsList) && this.goodsList.length > 0) {
          this.goodsList.forEach(item => {
            item.original_img = this.server.fixUrl(item.original_img)
          })
        }
        uni.hideLoading()
        uni.stopPullDownRefresh()
      },
      //轮播图切换修改背景色
      swiperChange (e) {

      },
      navToProductList (e) {
        uni.navigateTo({
          url: `/pages/product/list?action=${e.action}&params=${e.params}`,
        })
      },
      //详情页
      navToDetailPage (item) {
        //测试数据没有写id，用title代替
        let id = item.goods_id
        uni.navigateTo({
          url: `/pages/product/product?id=${id}`,
        })
      },
      navToMoney () {
        //测试数据没有写id，用title代替
        let item={
          order_id:(new Date()).getTime(),
          amount:0.1,
          game_appid:'EFA8BBEBAC91ED664'
        }
        let id = item.goods_id
        uni.navigateTo({
          url: `/pages/money/money?order_id=${item.order_id}&amount=${item.amount}&game_appid=${item.game_appid}`,
        })
      },
      //详情页
      navToProduct () {
        //测试数据没有写id，用title代替
        uni.switchTab({
          url: `/pages/product/all`,
        })
      },
      searchGoods () {
        uni.navigateTo({
          url: `/pages/product/list?action=search&params=${this.keyword}`,
        })
      },
    },
    // #ifndef MP
    // 标题栏input搜索框点击
    onNavigationBarSearchInputClicked: async function (e) {
      if(this.server._isEmpty(this.keyword)){
        return
      }
      uni.navigateTo({
        url: `/pages/product/list?action=search&params=${this.keyword}`,
      })
    },
    //点击导航栏 buttons 时触发
    onNavigationBarButtonTap (e) {
      const index = e.index
      if (index === 0) {
        this.$api.msg('点击了扫描')
      } else if (index === 1) {
        // #ifdef APP-PLUS
        const pages = getCurrentPages()
        const page = pages[pages.length - 1]
        const currentWebview = page.$getAppWebview()
        currentWebview.hideTitleNViewButtonRedDot({
          index,
        })
        // #endif
        uni.navigateTo({
          url: '/pages/notice/notice',
        })
      }
    },
    // #endif
  }
</script>

<style lang="scss">
    /* #ifdef MP */
    .mp-search-box {
        position: absolute;
        left: 0;
        top: 30upx;
        z-index: 9999;
        width: 100%;
        padding: 0 80upx;
        .ser-input {
            flex: 1;
            height: 56upx;
            line-height: 56upx;
            text-align: center;
            font-size: 28upx;
            color: $font-color-base;
            border-radius: 20px;
            background: rgba(255, 255, 255, .6);
        }
    }

    page {
        .cate-section {
            position: relative;
            z-index: 5;
            border-radius: 16upx 16upx 0 0;
            margin-top: -20upx;
        }
        .carousel-section {
            padding: 0;
            .titleNview-placing {
                padding-top: 0;
                height: 0;
            }
            .carousel {
                .carousel-item {
                    padding: 0;
                }
            }
            .swiper-dots {
                left: 45upx;
                bottom: 40upx;
            }
        }
    }

    /* #endif */

    page {
        background: #f5f5f5;
    }

    .m-t {
        margin-top: 16upx;
    }

    /* 头部 轮播图 */
    .carousel-section {
        position: relative;
        padding-top: 10px;

        .titleNview-placing {
            height: var(--status-bar-height);
            padding-top: 44px;
            box-sizing: content-box;
        }

        .titleNview-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 426upx;
            transition: .4s;
        }
    }

    .carousel {
        width: 100%;
        height: 350upx;

        .carousel-item {
            width: 100%;
            height: 100%;
            padding: 0 28upx;
            overflow: hidden;
        }

        image {
            width: 100%;
            height: 100%;
            border-radius: 10upx;
        }
    }

    .swiper-dots {
        display: flex;
        position: absolute;
        left: 60upx;
        bottom: 15upx;
        width: 72upx;
        height: 36upx;
        background-image: url();
        background-size: 100% 100%;

        .num {
            width: 36upx;
            height: 36upx;
            border-radius: 50px;
            font-size: 24upx;
            color: #fff;
            text-align: center;
            line-height: 36upx;
        }

        .sign {
            position: absolute;
            top: 0;
            left: 50%;
            line-height: 36upx;
            font-size: 12upx;
            color: #fff;
            transform: translateX(-50%);
        }
    }

    /* 分类 */
    .cate-section {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 30upx 22upx;
        background: #fff;
        .cate-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: $font-sm + 2upx;
            color: $font-color-dark;
        }
        /* 原图标颜色太深,不想改图了,所以加了透明度 */
        image {
            width: 88upx;
            height: 88upx;
            margin-bottom: 14upx;
            border-radius: 50%;
            opacity: .7;
            box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
        }
    }

    .ad-1 {
        width: 100%;
        height: 210upx;
        padding: 10upx 0;
        background: #fff;
        image {
            width: 100%;
            height: 100%;
        }
    }

    /* 秒杀专区 */
    .seckill-section {
        padding: 4upx 30upx 24upx;
        background: #fff;
        .s-header {
            display: flex;
            align-items: center;
            height: 92upx;
            line-height: 1;
            .s-img {
                width: 140upx;
                height: 30upx;
            }
            .tip {
                font-size: $font-base;
                color: $font-color-light;
                margin: 0 20upx 0 40upx;
            }
            .timer {
                display: inline-block;
                width: 40upx;
                height: 36upx;
                text-align: center;
                line-height: 36upx;
                margin-right: 14upx;
                font-size: $font-sm+2upx;
                color: #fff;
                border-radius: 2px;
                background: rgba(0, 0, 0, .8);
            }
            .icon-you {
                font-size: $font-lg;
                color: $font-color-light;
                flex: 1;
                text-align: right;
            }
        }
        .floor-list {
            white-space: nowrap;
        }
        .scoll-wrapper {
            display: flex;
            align-items: flex-start;
        }
        .floor-item {
            width: 150upx;
            margin-right: 20upx;
            font-size: $font-sm+2upx;
            color: $font-color-dark;
            line-height: 1.8;
            image {
                width: 150upx;
                height: 150upx;
                border-radius: 6upx;
            }
            .price {
                color: $uni-color-primary;
            }
        }
    }

    .f-header {
        display: flex;
        align-items: center;
        height: 140upx;
        padding: 6upx 30upx 8upx;
        background: #fff;
        image {
            flex-shrink: 0;
            width: 80upx;
            height: 80upx;
            margin-right: 20upx;
        }
        .tit-box {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .tit {
            font-size: $font-lg +2upx;
            color: #font-color-dark;
            line-height: 1.3;
        }
        .tit2 {
            font-size: $font-sm;
            color: $font-color-light;
        }
        .icon-you {
            font-size: $font-lg +2upx;
            color: $font-color-light;
        }
    }

    /* 团购楼层 */
    .group-section {
        background: #fff;
        .g-swiper {
            height: 650upx;
            padding-bottom: 30upx;
        }
        .g-swiper-item {
            width: 100%;
            padding: 0 30upx;
            display: flex;
        }
        image {
            width: 100%;
            height: 460upx;
            border-radius: 4px;
        }
        .g-item {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .left {
            flex: 1.2;
            margin-right: 24upx;
            .t-box {
                padding-top: 20upx;
            }
        }
        .right {
            flex: 0.8;
            flex-direction: column-reverse;
            .t-box {
                padding-bottom: 20upx;
            }
        }
        .t-box {
            height: 160upx;
            font-size: $font-base+2upx;
            color: $font-color-dark;
            line-height: 1.6;
        }
        .price {
            color: $uni-color-primary;
        }
        .m-price {
            font-size: $font-sm+2upx;
            text-decoration: line-through;
            color: $font-color-light;
            margin-left: 8upx;
        }
        .pro-box {
            display: flex;
            align-items: center;
            margin-top: 10upx;
            font-size: $font-sm;
            color: $font-base;
            padding-right: 10upx;
        }
        .progress-box {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 8upx;
        }
    }

    /* 分类推荐楼层 */
    .hot-floor {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20upx;
        .floor-img-box {
            width: 100%;
            height: 320upx;
            position: relative;
            &:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(rgba(255, 255, 255, .06) 30%, #f8f8f8);
            }
        }
        .floor-img {
            width: 100%;
            height: 100%;
        }
        .floor-list {
            white-space: nowrap;
            padding: 20upx;
            padding-right: 50upx;
            border-radius: 6upx;
            margin-top: -140upx;
            margin-left: 30upx;
            background: #fff;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
            position: relative;
            z-index: 1;
        }
        .scoll-wrapper {
            display: flex;
            align-items: flex-start;
        }
        .floor-item {
            width: 180upx;
            margin-right: 20upx;
            font-size: $font-sm+2upx;
            color: $font-color-dark;
            line-height: 1.8;
            image {
                width: 180upx;
                height: 180upx;
                border-radius: 6upx;
            }
            .price {
                color: $uni-color-primary;
            }
        }
        .more {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            flex-shrink: 0;
            width: 180upx;
            height: 180upx;
            border-radius: 6upx;
            background: #f3f3f3;
            font-size: $font-base;
            color: $font-color-light;
            text:first-child {
                margin-bottom: 4upx;
            }
        }
    }

    /* 猜你喜欢 */
    .guess-section {
        display: flex;
        flex-wrap: wrap;
        padding: 0 30upx;
        background: #fff;
        .guess-item {
            display: flex;
            flex-direction: column;
            width: 48%;
            padding-bottom: 40upx;
            &:nth-child(2n+1) {
                margin-right: 4%;
            }
        }
        .image-wrapper {
            width: 100%;
            height: 330upx;
            border-radius: 3px;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
                opacity: 1;
            }
        }
        .title {
            font-size: $font-lg;
            color: $font-color-dark;
            line-height: 80upx;
        }
        .price {
            font-size: $font-lg;
            color: $uni-color-primary;
            line-height: 1;
        }
    }


</style>
